
.header-top{
    background-color: #A3D0C3;
    height: 60px;
    margin: 5px ;
    display: flex;
    justify-content: space-around;
    align-items: center;
    border-radius: 2%;
}
.top-head{
    font-size: 25px;
    display:inline-block;font-weight:bold;color:#def;text-shadow:0 0 1px currentColor,-1px -1px 1px #000,0 -1px 1px #000,1px -1px 1px #000,1px 0 1px #000,1px 1px 1px #000,0 1px 1px #000,-1px 1px 1px #000,-1px 0 1px #000;-webkit-filter:url(#diff1);filter:url(#diff1);/*background:#def;padding:0 .2em*/
}

.index-content .content {
    display: flex;
    justify-content: flex-start;
    background-color: #eee;

    margin: 5px ; 
    border-radius: 2%;
}
.video {
    width: 450px;
    height: 200px;
    object-fit: contain; /* 保持视频的宽高比 */
    transition: transform 0.5s; /* 过渡动画 */
    cursor: pointer; /* 将鼠标指针变为点击状态 */
    margin-right: 5px;
  }

.content-text{
    background-color: #A3D0C3;
    height: 10px;
    margin: 5px ;
    display: flex;
    justify-content: space-around;
    align-items: center;
    border-radius: 2%;
}


.page-end{
    height:50px;
    background-color: white
}
.footer{
  display: flex;
  position: fixed;
  left: 0;
  bottom: 0;
  width: 97%;
  margin-top: 5px ; 
  margin-left: 5px ; 
  background-color: #eee;
  border-radius: 2%;    
}
.footer>div{
   height:50px;
   text-align: center;
  
   flex-grow: 1; 
}
.footer .foot{
    display: flex;
    align-items: center; /* 垂直居中 */
    justify-content: center; /* 水平居中 */
    height: 50px; /* 容器的高度 */
}
.footer .three{
    background-color: #017E5C;
}
/* 弹窗的样式 */
.modal {
    display: none; /* 默认隐藏 */
    position: fixed; /* 固定位置 */
    z-index: 1; /* 位于顶层 */
    left: 0;
    top: 0;
    width: 100%; /* 全屏宽度 */
    height: 100%; /* 全屏高度 */
    overflow: auto; /* 超出内容可滚动 */
    background-color: rgb(0,0,0); /* 背景颜色带些透明度 */
    background-color: rgba(0,0,0,0.4); /* 透明度 */
  }
   
  /* 弹窗内容的样式 */
  .modal-content {
    background-color: #fefefe;
    margin: 15% auto; /* 垂直居中 */
    padding: 20px;
    border: 1px solid #888;
    width: 80%;
  }
   
  /* 隐藏关闭按钮 */
  .close {
    color: #aaa;
    float: right;
    font-size: 18px;
    font-weight: bold;
  }
   
  .close:hover,
  .close:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
  }